<template>
	<view>
		<view class="goods-list" @click="jump(goods.id)">
			<view class="list-left">
				<image :src="goods.thumb" mode=""></image>
			</view>
			<view class="list-right">
				<view>{{ goods.title }}</view>
				<view class="num">{{ goods.groupnum }}人团</view>
				<view class="price">{{ goods.groupsprice }}</view>
			</view>
			<view></view>
		</view>
		<view class="info-list">
			<!-- <view class="group-img" v-for="(item, index) in groudAvatar" :key="index"> -->
			<view class="group-img" v-if="num>5">
				<!-- <image style="border-radius:50%;" :src="item.avatar" mode=""></image> -->
				<view class="" v-for="(item, index) in users" :key="index">
					<image v-if="item.avatar != ''" :src="item.avatar" mode=""></image>
					<image v-else src="../../static/icon/pic.png" mode=""></image>
					<text class="text" v-if="item.heads == 1">团长</text>
				</view>
				<view class="" v-for="items in num">
					<image src="../../static/icon/pic.png" mode=""></image>
					<!-- <text class="text" v-if="item.heads == 1">团长</text> -->
				</view>
				<!-- <image src="../../static/icon/pic.png" v-for="(items,idx) in 30" :key="idx" mode=""></image> -->
				<!-- <image v-else src="../../static/icon/pic.png" mode=""></image> -->
				<!-- <image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image> -->
			</view>
			<view class="group-img1" v-if="num<5">
				<!-- <image style="border-radius:50%;" :src="item.avatar" mode=""></image> -->
				<view class="" v-for="(item, index) in users" :key="index">
					<image v-if="item.avatar != ''" :src="item.avatar" mode=""></image>
					<image v-else src="../../static/icon/pic.png" mode=""></image>
					<text class="text" v-if="item.heads == 1">团长</text>
				</view>
				<view class="" v-for="items in num">
					<image src="../../static/icon/pic.png" mode=""></image>
					<!-- <text class="text" v-if="item.heads == 1">团长</text> -->
				</view>
				<!-- <image src="../../static/icon/pic.png" v-for="(items,idx) in 30" :key="idx" mode=""></image> -->
				<!-- <image v-else src="../../static/icon/pic.png" mode=""></image> -->
				<!-- <image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image>
				<image src="../../static/img/avatar.png" mode=""></image> -->
			</view>
			<!-- <view v-if="users.length > 4">···</view> -->
			<!-- <view class="group-more" @click="groupMore = !groupMore" > -->
			<view class="group-more" @click="moreDetail(data.teamid)">
				查看详情
				<!-- <image src="../../static/icon/right.png" mode=""></image> -->
			</view>
		</view>

		<!-- <view class="start"> -->
		<!-- <text>{{ groudList.teaming_num }}</text> -->
		<!-- <text>1</text> -->
		<!-- 人在拼团，可直接参与 -->
		<!-- <text>100人</text>成团，还需<text>36人</text>即可开团 -->
		<!-- </view> -->
		<view class="bg">
			<view class="text" v-if="data.status == 0">
				拼团进行中
				<view class="time">
					<view>剩余</view>
					<view>
						<uni-countdown :count="time" type="4" fontColor="#ff9933" @timeup="timeup"></uni-countdown>
					</view>
				</view>
			</view>
			<view class="text" v-if="data.status == -1">拼团已结束</view>
			<view class="text" v-if="data.status == 1">拼团成功</view>
		</view>
		<view class="detail">商品详情</view>
		<u-parse :html="goods.content"></u-parse>
		<view class="btn">
			<view class="to">
				<view class="home" @click="jumpUrl('/pages/groupShopping/groupShopping')">
					<view class="">
						<image src="../../static/img/points/home.png" mode=""></image>
					</view>
					<view class="">拼团</view>
				</view>
				<!-- <view class="home">
					<view class=""><image src="../../static/img/points/collect.png" mode=""></image></view>
					<view class="">收藏</view>
				</view> -->
			</view>
			<view class="conversion" v-if="data.pay_status == 0 && data.status == 0" @click="joinGroup(data.teamid)">去支付</view>
			<view class="conversion" v-if="data.pay_status == 1 && data.status == 0" @click="onShare(1)">快邀请好友参团吧</view>
			<view class="conversion2" v-if="data.pay_status == 2 || data.status == -1">拼团已结束</view>
		</view>

		<view class="mark" v-if="show" @click="show = !show">
			<image src="../../static/img/guide.png" mode=""></image>
		</view>
		<!-- 规则选择 -->
		<view class="ele" :class="{ block: selType }" @click.self="selType = !selType">
			<view class="box" :class="{ active: selType }">
				<view class="type">
					<view class="tilte" style="font-weight: bold;font-size: 30upx;">复投次数</view>
					<view class="" style="color: #999;">（选择复投次数，此团未拼中者可无条件自动加入新团。当次数使用完仍未中，则退款）</view>
					<view class="name">
						<view :class="{ active: typeIndex === -1 }" @click="typeIndex = -1">不参与复投</view>
						<view v-for="(item, index) in repeatnum" :key="index" :class="{ active: typeIndex === index }" @click="eleType(index, item.val)">{{ item.val }}次</view>
					</view>
				</view>
				<view class="btn" @click="pay">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service from '@/store/service.js';
	import uniCountdown from '@/components/uni-countdown.vue';
	import uniRate from '@/components/uni-rate/uni-rate.vue';
	// import wx from 'weixin-js-sdk';

	export default {
		data() {
			return {
				goods: '',
				data: '',
				users: [],
				time: '',
				show: false,
				tid: '',
				// 复投
				selType: false,
				typeIndex: -1,
				isrepeat: '',
				repeatnum: [],
				teamid: '',
				type: 0,
				id: '',
				icode: '',
				mids: '',
				groupnum: '',
				people: '',
				num: '',
				nickname: '',
				endtime: ''
			};
		},
		components: {
			uniCountdown,
			uniRate
		},
		onUnload: function() {
			// console.log('卸载')
			clearTimeout(this.endtime)
		},
		onLoad: function(e) {
			let self = this;
			self.id = e.goodsid;
			self.tid = e.tid;
			self.icode = e.icode;
			var typeurl = '/pages/groupOrder/groupResult?goodsid=' + e.goodsid + '&tid=' + e.tid + '&icode=' + e.icode;
			uni.setStorageSync('typeurl', typeurl);
			uni.setStorageSync('icode', self.icode);
			self.getTeamsDetail();
			self.getUserInfo();
			self.onShare();
		},
		// watch:{
		// 	// let self=this
		// 	 time(val, oldVal){//普通的watch监听
		// 	 setInterval(function(){
		// 		 console.log("time: "+val, oldVal);
		// 		 // this.getTeamsDetail()
		// 	 },10000)

		// 	     },
		// },
		methods: {
			getUserInfo() {
				var self = this;
				self.$http.post(service.api.user.info, {}).then(function(res) {
					if (res.code == 400) {
						self.$http.member.info().then(info => {});
					} else {
						var list = res.data;
						self.mids = list.id;
						self.nickname = list.nickname
						// console.log(self.nickname);
						uni.setStorageSync('mids', self.mids);
					}
				});
			},
			//立即购买
			pay() {
				let self = this;
				// console.log(this.val);
				if (self.typeIndex == -1) {
					uni.navigateTo({
						url: `/pages/createOrder/createOrder?goodsid=${self.id}&teamid=${self.teamid}`
					});
					return;
				}
				if (self.type == 1) {
					uni.navigateTo({
						url: `/pages/createOrder/createOrder?goodsid=${self.id}&teamid=${self.teamid}&isrepeat=1&repeatnum=${self.val}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/createOrder/createOrder?goodsid=${self.id}&isrepeat=1&repeatnum=${self.val}`
					});
				}
			},
			// 复投
			eleType(index, val) {
				this.typeIndex = index;
				console.log(val);
				this.val = val;
			},
			joinGroup(tid) {
				let self = this;
				self.teamid = tid;
				if (self.isrepeat == 1) {
					console.log(111);
					self.type = 1;
					console.log(self.type, 555, self.selType);
					// this.groupMore = !this.groupMore;
					self.selType = true;
					// self.teamid=tid
				} else {
					uni.navigateTo({
						// url:`/pages/createOrder/createOrder?goodsid=${self.id}`
						url: `/pages/createOrder/createOrder?goodsid=${self.id}&teamid=${tid}`
					});
				}
				// /pages/createOrder/createOrder?goodsid=' + goods.id + '&teamid=' + tid
			},
			timeup() {
				// console.log('计时结束')
				this.data.status = -1;
			},
			jump(id) {
				uni.navigateTo({
					url: `../hundred/commodity?goodsid=${id}`
				});
			},
			onShare(e) {
				var self = this;
				if (e == 1) {
					self.show = true;
				}
				self.$http
					.get(service.api.group.share, {
						goodsid: self.id,
						url: location.href.split('#')[0]
					})
					.then(function(res) {
						if (res.code == 1) {
							if (res.data) {
								// 存储微信分享数据data

								let data = res.data;


								// wx.config({
								// 	debug: false,
								// 	appId: data.appId,
								// 	timestamp: data.timestamp,
								// 	nonceStr: data.nonceStr,
								// 	signature: data.signature,
								// 	// jsApiList: ['onMenuShareAppMessage', 'updateTimelineShareData', 'updateAppMessageShareData']
								// 	jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
								// });
								// wx.ready(function() {
								// 	wx.onMenuShareAppMessage({
								// 		title: `${self.nickname}邀请您参加${self.goods.title}的拼团`,
								// 		desc: self.goods.description,
								// 		// link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1] + '&icode=' + self.icode,
								// 		link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1],
								// 		imgUrl: self.goods.thumb,
								// 		success: function() {
								// 			console.log('cg');
								// 		}
								// 	});
								// 	wx.error(function(res) {
								// 		console.log(res);
								// 	});
								// 	wx.onMenuShareTimeline({
								// 		title: `${self.nickname}邀请您参加${self.goods.title}的拼团`,
								// 		// link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1] + '&icode=' + self.icode,
								// 		link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1],
								// 		imgUrl: self.goods.thumb,
								// 		success: function() {
								// 			console.log('微信朋友圈分享');
								// 		}
								// 	});
								// });
								// wx.error(function(res) {
								// 	// alert(JSON.stringify(res));

								// 	console.log(res);
								// });
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.info
							});
						}
					});
			},
			jumpUrl(url) {
				uni.switchTab({
					url: url
				});
			},
			moreDetail(id) {
				uni.navigateTo({
					url: `/pages/groupOrder/groupPeople?id=${id}`
				});
			},

			getTeamsDetail() {
				var self = this;
				self.$http
					.get(service.api.group.teamsDetail, {
						teamid: self.tid
					})
					.then(function(res) {
						var list = res.data;
						self.data = list;
						self.goods = list.goods;
						self.groupnum = list.goods.groupnum;
						if (self.groupnum > 40) {
							self.groupnum = 40
						}
						// console.log(self.groupnum,1234);
						self.id = self.goods.id;
						self.tid = list.teamid;
						self.users = list.order.users;
						self.people = list.order.users.length;
						// console.log(self.people,777);
						self.num = self.groupnum - self.people
						// console.log(self.num,111);
						self.isrepeat = self.goods.isrepeat;
						// console.log(self.isrepeat, 'self.isrepeat');
						self.repeatnum = self.goods.repeatnum;
						// console.log(self.repeatnum, 'self.repeatnum');
						var timestamp = Date.parse(new Date());
						timestamp = timestamp / 1000;
						self.time = self.data.endtime - timestamp;
						if (self.time == 0) {
							console.log(self.time, 666);
							// console.log(1111);
							self.getTeamsDetail();
							self.data.status == -1;
						} else if (self.time > 0) {
							console.log(1111);
							// setInterval(function(){
							// 	
							// },5000)

							self.endtime = setTimeout(function() {

								self.getTeamsDetail();
							}, 10000)

							// 	// self.data.status == -1;
						}
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goods-list {
		display: flex;
		align-items: center;
		background-color: #fff;
		// margin: 20upx;
		padding-bottom: 34upx;
		padding-top: 20upx;
		margin-bottom: 20upx;

		.list-left {
			display: flex;
			align-items: center;

			image {
				width: 172upx;
				height: 172upx;
				margin: 0 20upx;
				border-radius: 10upx;
			}
		}

		.list-right {
			color: #000;

			.num {
				color: #ff9933;
				font-weight: bold;
			}

			.price {
				// margin-top: 10upx;
				color: #ff9933;
				font-size: 36upx;
				font-weight: bold;
			}
		}
	}

	.info-list {
		// display: flex;
		// align-items: center;
		// justify-content: space-around;
		padding: 44upx 20upx;
		background-color: #fff;

		.group-img,
		.group-img1 {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			position: relative;
			flex-wrap: wrap;
			margin-left: 15px;

			image {
				width: 110upx;
				height: 110upx;
				margin: 10upx 10upx;
				border-radius: 50%;
			}

			.text {
				background: rgba(255, 153, 51, 1);
				border-radius: 32upx;
				color: #fff;
				padding: 0 30upx;
				font-size: 26upx;
				position: absolute;
				top: 80upx;
				left: 10upx;

				// bottom: 0upx;
			}
		}

		.group-more {
			display: flex;
			align-items: center;
			justify-content: center;
			// color: #666666;
			margin-top: 40upx;
			color: #FF9933;
			font-size: 34upx;

			image {
				width: 40upx;
				height: 40upx;
			}
		}
	}

	.bg {
		background-color: #fff;
		// padding-top: 70upx;
		padding-bottom: 30upx;
		margin-bottom: 20upx;

		.text {
			color: #666;
			font-size: 32upx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		.time {
			display: flex;
		}
	}

	.detail {
		height: 80upx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		font-weight: bold;
	}

	//底部
	.btn {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1rpx solid rgba(204, 204, 204, 0.77);
		box-sizing: border-box;

		.conversion1 {
			width: 480rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ff9933;
			font-size: 36rpx;
			color: #ffffff;
			margin-right: 10upx;
		}

		.conversion {
			width: 480rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ff9933;
			font-size: 36rpx;
			color: #ffffff;
		}

		.to {
			width: calc(750rpx - 500rpx);
			display: flex;
			align-items: center;
			justify-content: center;

			.home {
				flex: 1;

				&>view:nth-child(1) {
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 58rpx;
						height: 58rpx;
					}
				}

				&>view:nth-child(2) {
					color: #666666;
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	}

	.mark {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 100000;

		image {
			position: absolute;
			right: 0;
			top: 40upx;
			width: 320upx;
			height: 280upx;
			margin-left: 20upx;
		}
	}

	.conversion2 {
		width: 480rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #999;
		font-size: 36rpx;
		color: #ffffff;
	}

	.ele {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: -1000;

		.box {
			width: 100vw;
			height: 700rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			border-radius: 30rpx 30rpx 0px 0px;
			transform: translateY(120%);
			transition: all 0.3s linear;

			.photo {
				image {
					width: 286rpx;
					height: 296rpx;
					position: absolute;
					top: -64rpx;
					left: 20rpx;
				}

				.price {
					position: absolute;
					left: 334rpx;
					top: 112rpx;

					&>view:nth-child(1) {
						color: #e99040;
						font-size: 48rpx;
					}

					&>view:nth-child(2) {
						color: #333333;
						font-size: 24rpx;
					}
				}
			}

			.type {
				padding: 100rpx 20rpx 15rpx 20rpx;

				.title {}

				.name {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.active {
						border: 1rpx solid rgba(233, 144, 64, 1);
						color: #e99040;
					}

					&>view {
						height: 68rpx;
						line-height: 68rpx;
						padding: 0 30rpx;
						border: 1rpx solid rgba(204, 204, 204, 1);
						border-radius: 35rpx;
						font-size: 24rpx;
						margin: 15rpx 0;
					}
				}
			}

			.count {
				padding: 50rpx 20rpx 0 20rpx;
				display: flex;
				justify-content: space-between;

				.num {
					display: flex;
					justify-content: center;
					align-items: center;

					&>view {
						width: 82rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: rgba(236, 236, 236, 1);
						border-radius: 20rpx;
						margin: 0 10rpx;
					}
				}
			}

			.btn {
				width: 700rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: linear-gradient(-90deg, rgba(242, 44, 4, 1) 0%, rgba(234, 141, 63, 1) 100%);
				border-radius: 40rpx;
				color: #ffffff;
				font-size: 36rpx;
				position: absolute;
				bottom: 38rpx;
				left: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.active {
			transform: translateY(0) !important;
		}
	}

	.block {
		z-index: 1000;
	}

	.group-img1 {
		justify-content: space-between;
	}

	/deep/ img {
		display: block;
	}

	/deep/ img:nth-last-child(1) {
		padding-bottom: 40upx;
	}
</style>
